<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>实时交易趋势</span>
      </div>
      <el-row type="flex" justify="space-between" :gutter="20">
        <el-col :span="12">
          <div v-if="orders1.len" style="width: 100%; height: 500px" id="chart1"></div>
          <div v-else style="text-align: center; line-height: 100px; color: #909399">暂无数据</div>
        </el-col>
        <el-col :span="12">
          <div v-if="orders2.len" style="width: 100%; height: 500px" id="chart2"></div>
          <div v-else style="text-align: center; line-height: 100px; color: #909399">暂无数据</div>
        </el-col>
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";
import Echarts from "echarts";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected orders1: any = {
    len: 0,
    nameData: [],
    links: []
  };
  @Prop()
  protected orders2: any = {
    len: 0,
    nameData: [],
    links: []
  };
  @Watch("orders1", { immediate: true, deep: true })
  protected getData() {
    this.$nextTick(() => {
      if (this.orders1.len) {
        this.draw1(this.orders1.nameData, this.orders1.links);
      }
    });
  }
  @Watch("orders2", { immediate: true, deep: true })
  protected getData2() {
    this.$nextTick(() => {
      if (this.orders2.len) {
        this.draw2(this.orders2.nameData, this.orders2.links);
      }
    });
  }
  private draw1(data: any, links: any) {
    const element: any = document.getElementById("chart1");
    const myChart = Echarts.init(element);

    myChart.setOption({
      series: [
        {
          type: "sankey",
          layout: "none",
          data,
          links
        }
      ]
    });
    myChart.dispatchAction({
      type: "mousemove"
    });
  }
  private draw2(data: any, links: any) {
    const element: any = document.getElementById("chart2");
    const myChart = Echarts.init(element);

    myChart.setOption({
      series: [
        {
          type: "sankey",
          layout: "none",
          data,
          links
        }
      ]
    });
    myChart.dispatchAction({
      type: "mousemove"
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
</style>


